<script setup>
import { ref } from 'vue';
import ChartContainer from '../ChartContainer.vue';

const option = ref({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['技术', '产品', '设计', '市场', '客服']
  },
  series: [
    {
      name: '部门占比',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '18',
          fontWeight: 'bold'
        }
      },
      data: [
        { value: 335, name: '技术' },
        { value: 310, name: '产品' },
        { value: 234, name: '设计' },
        { value: 135, name: '市场' },
        { value: 154, name: '客服' }
      ]
    }
  ]
});
</script>

<template>
  <ChartContainer title="部门人员分布饼图" :option="option" />
</template>